<template>
  <div class="header-nav">
    <div class="header-nav-inner">
      <div class="left-section">
        <div 
          v-for="item in navInfo.left" 
          :key="item.id"
          class="header-nav-item left" 
          :class="showLotteryPanel ? 'active' : ''"
          @click="handleAllLotterysClick"
          >
          <span class="icon">
            <i class="iconfont" :class="item.icon"></i>
          </span>
          <span class="text">{{item.text}}</span>
          <transition name="fade">
            <div class="all-lotterys" v-show="showLotteryPanel">
              <div class="contents">
                <router-link 
                  :to="lottery.path" 
                  class="content button-unselected"
                  v-for="lottery in item.lotteryCates" 
                  :key="lottery.id"
                  @click.stop="selectLotteryType(lottery.path)"
                  >
                  <span>{{lottery.name}}</span>
                </router-link>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="center-section">
        <div 
          class="header-nav-item center"
          v-for="(item, index) in navInfo.center"
          :key="item.id"
          >
          <router-link 
            @click.native="handleTabClick(item)"
            class="content"
            :to="index == 1 ? item.path + getLotteryType.id : item.path"
            >
            <span class="navicon" v-if="item.icon">
              <i class="iconfont" :class="item.icon"></i>
            </span>
            <span class="text">
              {{item.text}}
            </span>
          </router-link>
        </div>
      </div>
      <div class="right-section">
        <div class="header-nav-item right" v-if="navInfo.right" v-for="item in navInfo.right" :key="item.id">
          <router-link 
            class="content"
            :to="item.path"
            >
            <span class="navicon" v-if="item.icon">
              <i class="iconfont" :class="item.icon"></i>
            </span>
            <span class="text">
              {{item.text}}
            </span>
          </router-link>
        </div>
        <div class="header-nav-item right last">
          <div 
            class="content" 
            @mouseenter="handleMouseEnter" 
            @mouseleave="handleMouseLeave"
            >
            <span class="navicon">
              <i class="iconfont iconnav_shoujigoucai"></i>
            </span>
            <span class="text">手机购彩</span>
            <div 
              class="qrcode" 
              v-show="showQrCode"
              @mouseenter="handleQrFocus" 
              @mouseleave="handleQrBlur"
              >
              <qr-code></qr-code>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from '@/components/base/header-top/header-top'
import QrCode from '@/components/base/qr-code/qr-code'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderTop,
    QrCode
  },
  props: {
    navInfo: {
      type: Object,
      default: {
        left: [
          {
            id: 1,
            icon: 'iconnav_tuijian',
            text: '全部彩种',
            lotteryCates:  [
              {
                id: 1,
                name: '重庆时时彩',
                path: '/select-number/shishicai'
              },
              {
                id: 2,
                name: '极速飞艇',
                path: '/select-number/jsfeiting'
              },{
                id: 3,
                name: '江苏快三',
                path: '/select-number/jskuaisan'
              },{
                id: 4,
                name: '北京赛车',
                path: '/select-number/bjracer'
              },{
                id: 5,
                name: '江西快三',
                path: '/select-number/jxkuaisan'
              },{
                id: 6,
                name: '幸运快三',
                path: '/select-number/xykuaisan'
              },{
                id: 7,
                name: '极速快三',
                path: '/select-number/jskuaisan'
              },{
                id: 8,
                name: '十分六合彩',
                path: '/select-number/sfliuhecai'
              },{
                id: 9,
                name: '北京28',
                path: '/select-number/bj28'
              },{
                id: 10,
                name: '排列三',
                path: '/select-number/pailiesan'
              },{
                id: 11,
                name: '福彩3D',
                path: '/select-number/fc3D'
              },{
                id: 12,
                name: '极速时时彩',
                path: '/select-number/jsshishicai'
              },{
                id: 13,
                name: '广东11选5',
                path: '/select-number/gd11xuan5'
              },{
                id: 14,
                name: '香港六合彩',
                path: '/select-number/hkliuhecai'
              },{
                id: 15,
                name: '安徽快三',
                path: '/select-number/ahkuaisan'
              },{
                id: 16,
                name: '新疆时时彩',
                path: '/select-number/xjshishicai'
              },{
                id: 17,
                name: '极速赛车',
                path: '/select-number/jssaiche'
              },{
                id: 18,
                name: '幸运飞艇',
                path: '/select-number/xyfeiting'
              },{
                id: 19,
                name: '上海快三',
                path: '/select-number/shkuaisan'
              },{
                id: 20,
                name: '湖北快三',
                path: '/select-number/hbkuaisan'
              },{
                id: 21,
                name: '天津时时彩',
                path: '/select-number/tjshishicai'
              },{
                id: 22,
                name: '河北快三',
                path: '/select-number/hbkuaisan'
              },{
                id: 23,
                name: '甘肃快三',
                path: '/select-number/gskuaisan'
              },{
                id: 24,
                name: '广西快三',
                path: '/select-number/gxkuaisan'
              },{
                id: 25,
                name: '山东11选5',
                path: '/select-number/sd11xuan5'
              },{
                id: 26,
                name: '腾讯分分彩',
                path: '/select-number/txfenfencai'
              },{
                id: 27,
                name: '福建快三',
                path: '/select-number/fjkuaisan'
              },{
                id: 28,
                name: '贵州快三',
                path: '/select-number/gzkuaisan'
              },{
                id: 29,
                name: '河内时时彩',
                path: '/select-number/hnshishicai'
              },{
                id: 30,
                name: '老北京赛车',
                path: '/select-number/lbjracer'
              },
            ],
          }
        ],
        center: [
          {
            id: 2,
            icon: 'iconnav_shouye',
            text: '首页',
            path: '/home'
          },
          {
            id: 3,
            icon: '',
            text: '选号投注',
            position: 'center',
            path: '/select-number'
          },
          {
            id: 4,
            icon: '',
            text: '未结订单',
            position: 'center',
            path: '/unpaid-orders'
          },
          {
            id: 5,
            icon: '',
            text: '投注记录',
            position: 'center',
            path: 'buying-records'
          },
          {
            id: 6,
            icon: '',
            text: '追号记录',
            position: 'center',
            path: '/adding-records'
          },
          {
            id: 7,
            icon: '',
            text: '走势图',
            position: 'center',
            path: '/trends'
          },
          {
            id: 8,
            icon: '',
            text: '玩法说明',
            position: 'center',
            path: '/instructions'
          },
        ],
      }
    }
  },
  created() {
  },
  data() {
    return {
      // 所以彩票
      lotteryCates: [
        {
          id: 1,
          name: '重庆时时彩',
          path: '/select-number/shishicai'
        },
        {
          id: 2,
          name: '极速飞艇',
          path: '/select-number/jsfeiting'
        },{
          id: 3,
          name: '江苏快三',
          path: '/select-number/jskuaisan'
        },{
          id: 4,
          name: '北京赛车',
          path: '/select-number/bjracer'
        },{
          id: 5,
          name: '江西快三',
          path: '/select-number/jxkuaisan'
        },{
          id: 6,
          name: '幸运快三',
          path: '/select-number/xykuaisan'
        },{
          id: 7,
          name: '极速快三',
          path: '/select-number/jskuaisan'
        },{
          id: 8,
          name: '十分六合彩',
          path: '/select-number/sfliuhecai'
        },{
          id: 9,
          name: '北京28',
          path: '/select-number/bj28'
        },{
          id: 10,
          name: '排列三',
          path: '/select-number/pailiesan'
        },{
          id: 11,
          name: '福彩3D',
          path: '/select-number/fc3D'
        },{
          id: 12,
          name: '极速时时彩',
          path: '/select-number/jsshishicai'
        },{
          id: 13,
          name: '广东11选5',
          path: '/select-number/gd11xuan5'
        },{
          id: 14,
          name: '香港六合彩',
          path: '/select-number/hkliuhecai'
        },{
          id: 15,
          name: '安徽快三',
          path: '/select-number/ahkuaisan'
        },{
          id: 16,
          name: '新疆时时彩',
          path: '/select-number/xjshishicai'
        },{
          id: 17,
          name: '极速赛车',
          path: '/select-number/jssaiche'
        },{
          id: 18,
          name: '幸运飞艇',
          path: '/select-number/xyfeiting'
        },{
          id: 19,
          name: '上海快三',
          path: '/select-number/shkuaisan'
        },{
          id: 20,
          name: '湖北快三',
          path: '/select-number/hbkuaisan'
        },{
          id: 21,
          name: '天津时时彩',
          path: '/select-number/tjshishicai'
        },{
          id: 22,
          name: '河北快三',
          path: '/select-number/hbkuaisan'
        },{
          id: 23,
          name: '甘肃快三',
          path: '/select-number/gskuaisan'
        },{
          id: 24,
          name: '广西快三',
          path: '/select-number/gxkuaisan'
        },{
          id: 25,
          name: '山东11选5',
          path: '/select-number/sd11xuan5'
        },{
          id: 26,
          name: '腾讯分分彩',
          path: '/select-number/txfenfencai'
        },{
          id: 27,
          name: '福建快三',
          path: '/select-number/fjkuaisan'
        },{
          id: 28,
          name: '贵州快三',
          path: '/select-number/gzkuaisan'
        },{
          id: 29,
          name: '河内时时彩',
          path: '/select-number/hnshishicai'
        },{
          id: 30,
          name: '老北京赛车',
          path: '/select-number/lbjracer'
        },
      ],
      showLotteryPanel: false,
      showQrCode: false,
      isQrCodeFocused: false
    }
  },
  methods: {
    selectLotteryType(path, lottery) {
      this.$router.push({path})
      this.showLotteryPanel = false
    },
    handleAllLotterysClick() {
      this.showLotteryPanel = !this.showLotteryPanel
    },
    handleMouseEnter() {
      this.showQrCode = true
    },
    handleMouseLeave() {
      this.showQrCode = this.isQrCodeFocused ? true : false
    },
    handleQrFocus() {
      this.isQrCodeFocused = true
    },
    handleQrBlur() {
      this.isQrCodeFocused = false
    },
    handleTabClick(tab) {
      this.$emit('click', tab)
    }
  },
  computed: {
    ...mapGetters('lottery', ['getLotteryType'])
  }
}
</script>

<style lang="stylus">
  @import '~@/assets/styles/variables.styl'
  .header-nav
    width 100%
    height 49px
    box-sizing: border-box;
    background $color-theme-red
    .header-nav-inner
      width 1200px
      height 48px
      display flex
      align-items center
      margin 0 auto
      position relative
      color rgba(255,246,214,1)
      .left-section 
        .header-nav-item
          &.left
            position relative  
            width 200px
            height 48px 
            box-sizing border-box 
            padding-left 10px
            cursor pointer
            display flex 
            align-items center
            &.active
              background rgba(194,19,19,1)
              box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
            .all-lotterys 
              position absolute 
              top 48px
              left 0px
              width 666px
              height 238px
              background #fff
              box-sizing border-box 
              padding 10px
              border 1px solid rgba(219, 211, 211, 1)
              box-shadow 0px 3px 5px 0px rgba(0, 0, 0, 0.1)
              border-radius 0px 0px 3px 3px
              z-index 1000
              &.fade-enter, &.fade-leave-to 
                opacity 0
              &.fade-enter-active, &.fade-leave-active 
                transition opacity 0.3s
              .contents 
                display flex 
                flex-wrap wrap 
                align-items center
                width 100%
                height 100% 
                box-sizing border-box 
                .content 
                  box-sizing border-box 
                  width 96px 
                  height 32px
                  line-height 32px
                  margin-left 10px
                  text-align center
                  font-weight 400 
                  color $color-theme-dark
                  &.router-link-active 
                    background $color-theme-red
                    border 1px solid $color-theme-red
            .icon 
              margin-right 10px
              .iconfont 
                font-size 24px
            .text 
              font-size 15px 
              font-weight 700
              color #fff6d6
      .header-nav-item:hover span 
        transform scale(1.1)
      .center-section 
        display flex
        .center
          .content 
            display flex
            align-items center
            padding 0 20px 
            height 48px
            line-height 48px
            color #fff
            &.router-link-active 
              background rgba(194,19,19,1)
              box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
            .navicon 
              margin-right 10px
              .iconfont
                font-size 24px
                color #fff6d6
            .text 
              font-size 15px 
              font-weight 700
              color #fff6d6
      .right-section  
        display flex
        flex 1
        justify-content flex-end
        .right
          width 111px
          &.last 
            border-right 1px solid $color-divideline-header
            .content 
              justify-content space-around
              padding 0 10px
              cursor pointer
              position relative 
              line-height 1
              .qrcode 
                position absolute 
                top 48px 
                right 0
                z-index 1000
          .content 
            display flex
            align-items center
            justify-content center
            box-sizing border-box 
            padding 0 5px
            height 48px
            line-height 48px
            color #fff
            margin 0 auto
            border-left 1px solid $color-divideline-header
            &.router-link-active 
              background rgba(194,19,19,1)
              box-shadow 0px -1px 0px 0px rgba(255,246,214,1)
            .navicon 
              margin-right 5px
              .iconfont
                font-size 24px
                color #fff6d6
            .text 
              font-size 15px 
              font-weight 700
              color #fff6d6
     
</style>